<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QrCodeComponent',
  props: {
    text: {   //二维码中的内容
      type: String,
      required: true
    }
  },
  data() {
    return {
      qrcode: null
    }
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      //获取canvas元素，用来展示二维码
      const canvas = this.$refs.qrcodeCanvas

      //设置二维码的参数，例如大小、边距等
      const options = {
        width: 300, //二维码宽度
        height: 300, //二维码高度
        margin: 2,  //二维码边距
        color: {
          dark: "#24292E", //二维码颜色
          light: "#ffffff", //二维码背景色
        },
        errorCorrectionLevel: 'M',    //错误纠正级别，如 "L"（低）、"M"（中）、"Q"（高）和 "H"（最高）
        scale: 4,   //输出图像的缩放比例，用于放大或缩小生成的二维码
        // logo: {    //logo参数，用于添加二维码的logo
        //   src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
        //   width: 100,
        //   height: 100,
        //   margin: 2,
        //   excavate: true,
        // },
      }

      QRCode.toCanvas(canvas, this.text, options, error => {
        if (error) console.error(error)
      })

    }
  }
}
</script>
